<template>
    <div class="top">
        <div>
            <img src="../../img/top.png" alt="">
        </div>
        <div>
            <p><span>品牌</span>粥品香坊(大运村)</p>
            <p>蜂鸟专送/38分钟送达</p>
            <p><span>减</span>在线支付满28减5，满50减10</p>
        </div>



    </div>
    <div class="bottom">
        <span>公告</span>
        粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和...
    </div>

</template>

<script>
export default {

}
</script>

<style >
* {
    padding: 0;
    margin: 0;
}

.top {
    /* height: 26.667vw; */
    background-color: #45342a;
    display: flex;
    padding: 3.4vw;
    /* justify-content: space-between; */
}

.top div:nth-child(2) {
    margin-left: 4.333vw;
}

.top img {
    height: 17.067vw;
    width: 17.067vw;
}

.top p:first-child {
    font-size: 4.267vw;
    color: #fff;
}

.top p:first-child span {
    background-color: red;
    padding: 0.267vw;
    margin-right: 1.533vw;
}

.top p:nth-child(2) {
    font-size: 3.2vw;
    color: rgb(255, 255, 255);
    margin: 1.333vw;
}

.top p:nth-child(3) {
    color: rgb(255, 255, 255);
    font-size: 2.667vw;
}

.top p:nth-child(3) span {
    background-color: #fff;
    color: red;
    margin-right: 1.533vw;
    padding: 0 0.533vw;
}

.bottom {
    font-size: 2.667vw;
    background-color: #47423c;
    /* margin-top: 1.333vw; */
    line-height: 7.467vw;
    text-indent: 3.2vw;
    color: #9b9b9b;
}
.bottom span{
    background-color: #fff;
    font-weight: bold;
    padding: 0px 1.333vw;
}
</style>